<script setup lang="ts">
import { ref } from 'vue';
import Latest from './Latest.vue';
import Hottest from './Hottest.vue';
import Recommend from './Recommend.vue';

const active = ref(0);
</script>

<template>
    <div class="body">
        <van-tabs v-model:active="active">
            <van-tab title="最新">
                <Latest></Latest>
            </van-tab>
            <van-tab title="最热">
                <Hottest></Hottest>
            </van-tab>
            <van-tab title="推荐">
                <Recommend></Recommend>
            </van-tab>
        </van-tabs>
    </div>
</template>

<style lang="scss" scoped>
.body {
    display: flex;
    flex-direction: column;
    width: 94%;
    margin: 3%;
}
</style>